<template>
  <div class="header">
    <template v-if="rate < 0.6">
      <img
        src="~assets/exam/cry_boy.png"
        class="emotion"
      >
      <div class="comment">
        多多努力~
        <slot name="right" />
      </div>
    </template>
    <template v-else-if="rate < 0.9">
      <img
        src="~assets/exam/sad_boy.png"
        class="emotion"
      >
      <div class="comment">
        恭喜你~
        <slot name="right" />
      </div>
    </template>
    <template v-else>
      <img
        src="~assets/exam/smile_boy.png"
        class="emotion"
      >
      <div class="comment">
        恭喜你~
        <slot name="right" />
        <!-- 得分<em class="score">
          {{ score }}
        </em>分 -->
      </div>
    </template>
    <div class="sep-line" />
    <div class="total-score">
      <slot name="total" />
      <!-- 共{{ totalScore }}分 -->
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    rate: {
      type: Number,
      default: 0,
    },
  },
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 30px;
  height: 314px;
  color: #fff;
  background: url('~assets/exam/result_bg.png') 50% 100%/cover;
}
.emotion {
  height: 180px;
}
.comment {
  font-size: 30px;
}
.score {
  color: $error-app;
}
.total-score {
  font-size: 26px;
}
.sep-line {
  width: 260px;
  height: 1px;
  $start: rgba(255, 255, 255, .3);
  $middle: rgba(255, 255, 255, .75);
  background: linear-gradient(to right, $start, $middle 50%, $start);
}
</style>
